import React, { useState } from "react";
import { Button, Radio, Form, Input, Tree } from "antd";
import type { DataNode, TreeProps } from "antd/es/tree";
import { addUser } from "@/api/user";
import type { IUser } from "@/myTypes";

// 树形结构的数据
const treeData: DataNode[] = [
  {
    title: "首页",
    key: "0-0",
  },
  {
    title: "系统管理",
    key: "0-1",
    children: [
      {
        title: "部门管理",
        key: "0-1-0",
        children: [
          {
            title: "查询",
            key: "0-1-0-R",
          },
          {
            title: "添加",
            key: "0-1-0-C",
          },
          {
            title: "修改",
            key: "0-1-0-U",
          },
          {
            title: "删除",
            key: "0-1-0-D",
          },
        ],
      },
      { title: "用户管理", key: "0-1-1" },
      { title: "角色管理", key: "0-1-2" },
    ],
  },
  {
    title: "业务管理",
    key: "0-2",
    children: [
      { title: "预约管理", key: "0-2-0" },
      { title: "患者管理", key: "0-2-1" },
      { title: "医护管理", key: "0-2-2" },
    ],
  },
];

let currAllCheckedKeys:React.Key[] =[];

// 组件定义：
const App: React.FC = () => {
  // checkedKeys:当前树形结构所选中的key。
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(["0-0"]);
  
  // 点击提交按钮调用的函数
  const onFinish = (values: IUser) => {
    // values：是每一个表单项对应的数据，就是json个的数据。json对象的每个键对应Form.Item的name属性。
    console.log("发送请求前：currAllCheckedKeys", currAllCheckedKeys);
    addUser({
      ...values,
      checkedKeys: currAllCheckedKeys,
    }).then((res) => {
      alert("添加成功！");
    });
  };

  // 点击树形结构里的复选框时，调用的函数。
  const onCheck: TreeProps["onCheck"] = (checkedKeys: any, info) => {
    console.log("checkedKeys", checkedKeys); //当前选中的所有的key。
    console.log("info", info);

    setCheckedKeys(checkedKeys);
    // setCurrAllCheckedKeys(checkedKeys.concat(info.halfCheckedKeys));
    currAllCheckedKeys = checkedKeys.concat(info.halfCheckedKeys);
    console.log("点击复选框后的选中：currAllCheckedKeys",currAllCheckedKeys);
    
  };

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="账户名"
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        label="性别"
        name="sex"
        rules={[{ required: true, message: "Please input your sex!" }]}
      >
        <Radio.Group>
          <Radio value={"男"}>男</Radio>
          <Radio value={"女"}>女</Radio>
        </Radio.Group>
      </Form.Item>

      <Tree
        checkable
        treeData={treeData}
        checkedKeys={checkedKeys}
        onCheck={onCheck}
      />

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          添加
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;
